<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>3_回调ref中回调执行次数的问题</title>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>


	<script type="text/babel">
	/*
		如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，
		第一次传入参数 null，然后第二次会传入参数 DOM 
		这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。
		通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的
	*/

		//1.创建组件
		class Demo extends React.Component {

			state = { isHot: false }

			// 点我提示输入框输入
			showInfo = () => {
				const { input1 } = this
				alert(input1.value)
			}

			changeWeather = () => {
				//获取原来的状态
				const { isHot } = this.state
				//更新状态
				this.setState({
					isHot: !isHot
				})
			}

			saveInput = (c) => { this.input1 = c; console.log('@', c); }

			render() {
				const { isHot } = this.state
				return (
					<div>
						<h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
						<button onClick={this.changeWeather}>点我切换天气</button><br />
						{/*内联回调-------------更新执行两次*/}
						{/*<input ref={(c) => { this.input1 = c; console.log('@', c); }} type="text" /><br />*/}
						{/*class类绑定回调-------更新不再执行*/}
						<input ref={this.saveInput} type="text" /><br />
						<button onClick={this.showInfo}>点我提示输入的数据</button>
					</div>
				)
			}
		}

		//2.渲染组件到页面
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>
</body>

</html>